<template>
	<view class="order-container">
		<view class="tools">
			<view class="item " :class="status==0?'active':''" @click="handleTools(0)">全部</view>
			<view class="item" :class="status==1?'active':''" @click="handleTools(1)">待付款</view>
			<view class="item" :class="status==3?'active':''" @click="handleTools(3)">待发货</view>
			<view class="item" :class="status==4?'active':''" @click="handleTools(4)">待验收</view>
			<view class="item" :class="status==5?'active':''" @click="handleTools(5)">完成</view>
		</view>
		<scroll-view class="list-box" scroll-y="true" @scrolltolower="handleLoadMore">
			<xw-empty :isShow="load.status" :type="load.type"></xw-empty>
			<view class="box" v-for="(item,index) in list">
				<view class="order-num-box">
					<view>编号:{{item.order_num}}</view>
					<view class="status" v-if="item.status==1">待付款</view>
					<view class="status" v-if="item.status==2">待接单</view>
					<view class="status" v-if="item.status==3">待发货</view>
					<view class="status" v-if="item.status==4">已发货</view>
					<view class="status" v-if="item.status==5">已完成</view>
					<view class="status" v-if="item.status==-1" style="color:#999 ">退款中</view>
					<view class="status" v-if="item.status==-3" style="color:#999">已退款</view>
					<view class="status" v-if="item.status==-99" style="color:#999">支付超时</view>
				</view>
				<view class="goods" v-for="item1 in item.with_item">
					<view class="head-img">
						<image mode="widthFix" class="border-radius-20upx" :src="item1.head"></image>
					</view>
					<view class="content">
						<view>
							{{ item1.product_title }}
						</view>
						<view class="norm">
							{{ item1.product_norm_title }}
						</view>
					</view>
					<view class="price-box">
						<view class="price">¥{{ item1.price }}</view>
						<view class="num">*{{ item1.num }}</view>
					</view>
				</view>
				<view class="list">
					<view>总价</view>
					<view>￥{{item.order_price}}</view>
				</view>
				<view class="list">
					<view>优惠</view>
					<view>-￥{{item.coupon_price}}</view>
				</view>
				<view class="list">
					<view>实付</view>
					<view class="red text-lg text-weight-lg"><text>￥</text><text>{{item.actual_price}}</text></view>
				</view>
				<view class="list">
					<view>下单时间</view>
					<view>{{item.created_at}}</view>
				</view>
				<view class="list" v-if="item.pay_at">
					<view>支付时间</view>
					<view>{{item.pay_at}}</view>
				</view>
				<view class="list" v-if="item.send_at">
					<view>发货时间</view>
					<view>{{item.send_at}}</view>
				</view>
				<view class="list" v-if="item.confirm_at">
					<view>确认时间</view>
					<view>{{item.confirm_at}}</view>
				</view>
				<view class="list" v-if="item.refund_at">
					<view>退货时间</view>
					<view>{{item.refund_at}}</view>
				</view>
				<view class="footer">
					<view class="footer-btn-box">
						<view class="btn-plan-orange" v-if="item.status==1" @click="handleCloseOrder(item.id)">
							取消订单
						</view>
						<view class="btn-plan-orange" v-if="item.status==2 || item.status==3"
							@click="handleCloseOrder(item.id)">
							我要退款
						</view>
						<view class="btn-orange" v-if="item.status==1" @click="handlePayAgain(item.order_num)">
							付款
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import xwEmpty from '@/components/xw-empty/xw-empty';
	export default {

		components: {
			xwEmpty
		},
		data() {
			return {
				load: {
					status: false,
					type: 1
				},
				status: 0,
				page: 1,
				limit: 5,
				list: []
			}
		},
		onLoad() {
			if (this.$Route.query.status) {
				this.status = this.$Route.query.status
			}
			this.getOrderList()
		},
		methods: {
			handleLoadMore() {
				this.getOrderList()
			},

			handleCloseOrder(id) {
				this.$myRequest('order/close', {
					"order_id": id
				}, "POST").then((response) => {
					if (response.code == 1000) {
						this.list.forEach((element, index) => {
							if (element.id == id) {
								this.list[index].status = -1
							}
						});
						uni.showToast({
							title: response.message,
							icon: 'none',
							duration: 2000,
						})
					} else {
						uni.showToast({
							title: response.message,
							icon: 'none',
							duration: 2000,
						})
					}
				})
			},

			handlePayAgain(order_num = "") {
				this.$myRequest('order/pay_again', {
					"order_num": order_num
				}, "POST").then((response) => {
					if (response.code == 1000) {
						uni.requestPayment({
							provider: 'wxpay',
							nonceStr: response.data.nonceStr,
							package: response.data.package,
							paySign: response.data.paySign,
							signType: response.data.signType,
							timeStamp: response.data.timeStamp,
							success: (res) => {
								uni.showToast({
									title: '支付成功！',
									duration: 2000,
								})
							},
							fail: (err) => {
								uni.showToast({
									title: '已取消支付！',
									icon: 'none',
									duration: 2000,
								})
							},
						})
					} else {
						uni.showToast({
							title: '无效订单！',
							icon: 'none',
							duration: 2000,
						})
					}
				})
			},

			handleTools(status = '') {
				this.list = []
				this.status = status
				this.page = 1
				this.getOrderList()
			},

			getOrderList() {
				this.$myRequest('order/list', {
					status: this.status,
					page: this.page,
					limit: this.limit,
				}).then((res) => {
					if (res.code == 1000) {
						this.load.status = false
						if (res.data.data.length > 0) {
							this.list = this.list.concat(res.data.data)
							this.page++
						}
					}

					if (this.list.length == 0) {
						this.load.status = true
						this.load.text = "数据为空"
					} else {
						this.load.status = false
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.order-container {
		height: 100%;

		.tools {
			display: flex;
			height: 40px;
			align-items: center;
			color: #999;
			font-size: 28upx;
			/* 兼容chorme */
			background-color: #f5f5f5;
			z-index: 99;

			.item {
				text-align: center;
				flex: 1;
			}

			.active {
				color: #000;
			}
		}

		.list-box {
			padding-bottom: 30upx;
			height: calc(100vh - 80upx);

			.box {
				margin: 20upx;
				padding: 30upx;
				border-radius: 10upx;
				background-color: #fff;

				.order-num-box {
					padding: 20upx 0;
					padding-bottom: 40upx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.status {
						font-size: 26upx;
						font-weight: 600;
						color: $uni-color-error;
					}
				}

				.goods {
					display: flex;
					justify-content: space-between;

					.head-img {
						width: 160upx;
						height: 160upx;

						image {
							width: 140upx;
						}
					}

					.content {
						flex: 1;
						padding-left: 10upx;

						.norm {
							font-size: 24upx;
							margin-top: 10upx;
							color: #555;
						}
					}

					.price-box {
						.price {
							color: #333;
							font-weight: 600;
							font-size: 28upx;
						}

						.num {
							text-align: right;
							color: #999;
							font-size: 24upx;
						}
					}
				}

				.list {
					font-size: 28upx;
					padding-top: 16upx;
					padding-bottom: 16upx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.red {
						color: $uni-color-error;
					}
				}

				.footer {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 70upx;

					.btn-plan-orange {
						font-size: 26upx;
						background-color: #f5f5f5;
						border: none;
						color: $uni-color-green;
						line-height: 2.5;
						padding-left: 28upx;
						padding-right: 28upx;
						border-radius: 10upx;
						margin-left: 8upx;
					}

					.btn-orange {
						font-size: 26upx;
						background-color: $uni-color-team;
						border: none;
						line-height: 2.5;
						padding-left: 28upx;
						padding-right: 28upx;
						border-radius: 10upx;
						margin-left: 8upx;
					}

					.footer-btn-box {
						display: flex;
					}
				}
			}
		}
	}
</style>